<template>
    <div>
        <el-form ref="form" :model="formData" label-width="60px" class="formData">
            <el-form-item :label="$t('m.label.account')" prop="brandId" label-width="50px">
                <account
                    :form="formData"
                    formId="brandId"
                    addSize="mini"
                    size="small"
                    @selectAll="getSKUFNSKY(formData)"
                ></account>
            </el-form-item>
            <el-form-item prop="asin" :label="$t('m.label.ASIN')+':'">
                <el-select
                    :placeholder="$t('m.placeholder.selectASIN')"
                    filterable
                    allow-create
                    v-model="formData.asin"
                    size="small"
                    @change="getSKUFNSKY(formData)"
                >
                    <el-option v-for="item in ASINList" :key="item.key" :value="item" :label="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="sku" :label="$t('m.label.SKU')">
                <el-select
                    :placeholder="$t('m.placeholder.selectSKU')"
                    size="small"
                    clearable
                    filterable
                    v-model="formData.sku"
                    @focus="promptSKUFNSKY(formData)"
                >
                    <el-option
                        v-for="item in SKUFNSKY"
                        :key="item.key"
                        :value="item.sku"
                        :label="item.sku"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="fnsku" :label="$t('m.label.FNSKU')" label-width="70px">
                <el-select
                    :placeholder="$t('m.placeholder.selectSKU')"
                    size="small"
                    clearable
                    filterable
                    v-model="formData.fnsku"
                    @focus="promptSKUFNSKY(formData)"
                >
                    <el-option
                        v-for="item in SKUFNSKY"
                        :key="item.key"
                        :value="item.fnsku"
                        :label="item.fnsku"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label-width="10px">
                <el-button
                    @click="onSubmit"
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                >{{$t('m.button.search')}}</el-button>
                <el-button
                    @click="resetForm"
                    size="small"
                    icon="el-icon-circle-close"
                >{{$t('m.button.reset')}}</el-button>
            </el-form-item>
            <el-form-item label-width="10px">
                <el-button
                    size="small"
                    type="success"
                    icon="el-icon-circle-plus-outline"
                    @click="clickDialog()"
                >{{$t('m.button.new')}}</el-button>
            </el-form-item>
        </el-form>
        <el-table
            ref="table"
            :data="tableData"
            border="border"
            :header-cell-style="getRowClass"
            v-loading="loading"
        >
            <el-table-column prop="productModelNumber" :label="$t('m.label.Model')"></el-table-column>
            <el-table-column prop="brandName" :label="$t('m.label.account')"></el-table-column>
            <el-table-column
                prop="countryName"
                :label="$t('m.label.country')"
                :filters="country"
                :filter-method="filterCountry"
            ></el-table-column>
            <el-table-column prop="asin" :label="$t('m.label.ASIN')"></el-table-column>
            <el-table-column prop="sku" :label="$t('m.label.SKU')"></el-table-column>
            <el-table-column prop="fnsku" :label="$t('m.label.FNSKU')"></el-table-column>
            <el-table-column prop="upc" :label="$t('m.label.UPC')"></el-table-column>
            <el-table-column
                prop="transportType"
                :label="$t('m.label.shippingMethod')"
                :filters="transportTypeList"
                :filter-method="filterTransportType"
            ></el-table-column>
            <el-table-column prop="record" :label="$t('m.label.recorder')"></el-table-column>
            <el-table-column prop="edit" :label="$t('m.label.operating')" width="75">
                <template slot-scope="scope">
                    <el-button @click="clickDialog(scope.row)" size="mini">{{$t('m.button.edit')}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <scrollTable ref="scrollTable"></scrollTable>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogFormVisible"
            width="350px"
            @close="resetForm"
        >
            <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="80px">
                <el-form-item label="Model No:">{{basicInfo.productModelNumber}}</el-form-item>
                <el-form-item prop="countryId" :label="$t('m.label.country')">
                    <country :form="ruleForm" formId="countryId" addSize="mini" size="small"></country>
                </el-form-item>
                <el-form-item prop="brandId" :label="$t('m.label.account')">
                    <account
                        :form="ruleForm"
                        formId="brandId"
                        addSize="mini"
                        size="small"
                        @selectAll="getSKUFNSKY(ruleForm)"
                    ></account>
                </el-form-item>
                <el-form-item prop="asin" :label="$t('m.label.ASIN')+':'">
                    <el-select
                        :placeholder="$t('m.placeholder.selectASIN')"
                        filterable
                        allow-create
                        v-model="ruleForm.asin"
                        size="small"
                        @change="getSKUFNSKY(ruleForm)"
                    >
                        <el-option
                            v-for="item in ASINList"
                            :key="item.key"
                            :value="item"
                            :label="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="upc" :label="$t('m.label.UPC')+':'">
                    <el-input v-model="ruleForm.upc" size="small"></el-input>
                </el-form-item>
                <el-form-item prop="transportType" :label="$t('m.label.shippingMethod')+':'">
                    <el-select
                        :placeholder="$t('m.label.shippingMethod')"
                        v-model="ruleForm.transportType"
                        size="small"
                    >
                        <el-option
                            v-for="item in transportTypeList"
                            :key="item.key"
                            :value="item.text"
                            :label="item.text"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="sku" :label="$t('m.label.SKU')">
                    <el-select
                        :placeholder="$t('m.placeholder.selectSKU')"
                        size="small"
                        clearable
                        filterable
                        v-model="ruleForm.sku"
                        @focus="promptSKUFNSKY(ruleForm)"
                    >
                        <el-option
                            v-for="item in SKUFNSKY"
                            :key="item.key"
                            :value="item.sku"
                            :label="item.sku"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="fnsku" :label="$t('m.label.FNSKU')">
                    <el-select
                        :placeholder="$t('m.placeholder.selectSKU')"
                        size="small"
                        clearable
                        filterable
                        v-model="ruleForm.fnsku"
                        @focus="promptSKUFNSKY(ruleForm)"
                    >
                        <el-option
                            v-for="item in SKUFNSKY"
                            :key="item.key"
                            :value="item.fnsku"
                            :label="item.fnsku"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    @click="formOnSubmit('ruleForm')"
                    size="small"
                    :disabled="dialogloading"
                    :icon="!dialogloading?'el-icon-circle-plus-outline':'el-icon-loading'"
                >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template> 
<script>
const ERR_OK = 200;
import scrollTable from "components/scroll/scroll-table.vue";
import account from "components/searchfor/account";
import country from "components/searchfor/country";
export default {
    props: {
        basicInfo: Object
    },
    data() {
        return {
            formData: {
                productId: this.basicInfo.productId
            },
            loading: false,
            tableData: [],
            ASINList: [],
            SKUFNSKY: [],
            country: [],
            transportTypeList: [],
            dialogFormVisible: false,
            ruleForm: {},
            dialogTitle: "",
            dialogloading: false,
            rules: {
                countryId: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectCountry"),
                        trigger: "change"
                    }
                ],
                brandId: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectAccount"),
                        trigger: "change"
                    }
                ],
                asin: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectASIN"),
                        trigger: "change"
                    }
                ],
                sku: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectSKU"),
                        trigger: "change"
                    }
                ],
                fnsku: [
                    {
                        required: true,
                        message: this.$t("m.placeholder.selectFNSKU"),
                        trigger: "change"
                    }
                ]
            }
        };
    },
    created() {
        this.getData();
        this.getASIN();
        this.getCountry();
        this.getTransportTypeList();
    },
    methods: {
        //默认获取table
        getData() {
            this.loading = true;
            this.$ajax
                .get(
                    this.GLOBAL.productService +
                        "/productCoded/findProductCodeInformationByProductId?productId=" +
                        this.basicInfo.productId
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.tableData = res.data.data;
                    }
                    this.loading = false;
                    this.$refs.scrollTable.scrollShow(this.$refs.table);
                });
        },
        //条件获取table
        onSubmit() {
            this.loading = true;
            if (this.formData.brandId) {
                this.$ajax({
                    method: "get",
                    url:
                        this.GLOBAL.productService +
                        "/productCoded/findByProductIdAndSellerIdAndAsinAndSkuAndFnsku",
                    params: this.formData
                }).then(res => {
                    if (res.data.code === ERR_OK) {
                        this.tableData = res.data.data;
                    }
                    this.loading = false;
                    this.$refs.scrollTable.scrollShow(this.$refs.table);
                });
            } else {
                this.getData();
            }
        },
        getASIN() {
            this.$ajax
                .get(
                    this.GLOBAL.productService +
                        "/productCoded/findAsinByProductId?productId=" +
                        this.basicInfo.productId
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.ASINList = res.data.data;
                    }
                });
        },
        getSKUFNSKY(form) {
            if (form.asin && form.brandId) {
                this.$ajax
                    .get(
                        this.GLOBAL.productService +
                            "/productCoded/findSkuAndFnskuByAsinAndSellerId?asin=" +
                            form.asin +
                            "&brandId=" +
                            form.brandId
                    )
                    .then(res => {
                        if (res.data.code === ERR_OK) {
                            this.SKUFNSKY = res.data.data;
                        }
                    });
            }
        },
        promptSKUFNSKY(form) {
            if (!form.asin || !form.brandId) {
                this.$message.warning("请选择账号和ASIN");
            }
        },
        getCountry() {
            this.$ajax
                .get(
                    this.GLOBAL.productService + "/productCoded/findCountryList"
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.country = res.data.data;
                    }
                });
        },
        filterCountry(value, row) {
            return row.countryName == value;
        },
        getTransportTypeList() {
            this.$ajax
                .get(
                    this.GLOBAL.productService +
                        "/productCoded/findTransportType"
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.transportTypeList = res.data.data;
                    }
                });
        },
        filterTransportType(value, row) {
            return row.transportType == value;
        },
        resetForm() {
            this.$refs["form"].resetFields();
            this.SKUFNSKY = [];
        },
        //弹框show
        clickDialog(form) {
            if (form) {
                this.ruleForm = JSON.parse(JSON.stringify(form));
                this.dialogTitle = this.$t("m.button.edit");
            } else {
                this.ruleForm = {};
                this.dialogTitle = this.$t("m.button.new");
            }
            this.dialogFormVisible = true;
        },
        formOnSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.dialogloading = true;
                    this.ruleForm.userId = 1;
                    this.ruleForm.productId = this.basicInfo.productId;
                    this.ruleForm.productModelNumber = this.basicInfo.productModelNumber;
                    this.ruleForm.sellerId = this.ruleForm.brandId;
                    this.ruleForm.record = "当前用户";
                    if (this.dialogTitle === this.$t("m.button.edit")) {
                        this.editCodedInfo();
                    } else {
                        this.addCodedInfo();
                    }
                } else {
                    return false;
                }
            });
        },
        editCodedInfo() {
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.productService +
                    "/productCoded/updateProductCodedInformation",
                data: this.ruleForm
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    if (res.data.data instanceof Array) {
                        this.resetForm();
                        this.onSubmit();
                        this.$message.success(res.data.msg);
                        this.dialogFormVisible = false;
                    } else {
                        this.$message.warning(res.data.data);
                    }
                } else {
                    this.$message.error(res.data.msg);
                }
                this.dialogloading = false;
            });
        },
        addCodedInfo() {
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.productService +
                    "/productCoded/addProductCodedInformation",
                data: this.ruleForm
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    if (res.data.data instanceof Array) {
                        this.resetForm();
                        this.onSubmit();
                        this.$message.success(res.data.msg);
                        this.dialogFormVisible = false;
                    } else {
                        this.$message.warning(res.data.data);
                    }
                } else {
                    this.$message.error(res.data.msg);
                }
                this.dialogloading = false;
            });
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    },
    components: {
        scrollTable,
        account,
        country
    }
};
</script>
<style lang="stylus" scoped>
.el-form-item {
    margin-bottom: 15px;
    max-width: 260px;
}

.formData {
    .el-form-item {
        display: inline-block;
        margin-bottom: 10px;
    }
}
</style>